/* 尾部 */
* {
	margin: 0;
	padding: 0;
	body {
		position: relative;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		header {
			width: 100%;
			position: absolute;
			display: flex;
			left: 0px;
			top: 0px;
			justify-content: space-around;
			height: 60px;
			line-height: 60px;
			background-color: #fff;
			border-bottom: 1px solid #999;
			box-shadow: 0 0 5px 5px #999;
			z-index: 5;
			a {
				text-decoration: none;
				color: #999;
				font-size: 16px;
				&.active {
					color: #4294ff;
					font-size: 18px;
					font-weight: bold;
					position: relative;
					&.active::after {
						content: "";
						width: 50%;
						height: 2px;
						background-color: #4294ff;
						position: absolute;
						bottom: 0px;
						right: 50%;
						transform: translateX(50%);
					}
				}
			}
		}
		main {
			height: 100px;
			flex-grow: 1;
			width: 100%;
			box-sizing: border-box;
			padding: 0 5%;
			overflow-y: auto;
			margin-bottom: 77px;
		}

		footer {
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			height: 77px;
			width: 100%;
			box-shadow: 10px 10px 10px 10px;
			background-color: #fff;
			a {
				width: 60px;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				align-content: center;
				color: #a1a1a1cc;
				text-decoration: none;
				.iconfont {
					font-size: 32px;
				}
				&.active {
					color: #62cdff;
				}
			}
			// .active {
			// 	color: aqua;
			// }
		}
	}
}
/* 字体图标 */
.iconfont {
	font-family: "iconfont" !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
